<template>
    <div id="app" style="height:100%">
        <x-header :left-options="{backText: ''}">随便逛逛</x-header>
        <search
                @on-change="getResult"
                placeholder="活动名/发起人"
                :results="results"
                v-model="value"
                position="absolute"
                auto-scroll-to-top top="46px"
                @on-submit="onSubmit"
                ref="search"></search>
        <div class="box">
            <checker v-model="demo1" default-item-class="demo4-item"
                     selected-item-class="demo4-item-selected" @on-change="change">
                <checker-item value="1">{{ ('交友聚会') }}</checker-item>
                <checker-item value="2">{{ ('音乐戏剧') }}</checker-item>
                <checker-item value="3">{{ ('体育运动') }}</checker-item>
                <checker-item value="4">{{ ('户外旅行') }}</checker-item>
                <checker-item value="5">{{ ('讲座公益') }}</checker-item>
                <checker-item value="6">{{ ('其他') }}</checker-item>
            </checker>
        </div>
        <div class="wrap" ref="scrollContainer">
            <div class="users" v-if="activityPage.length > 0">
                <div class="user" v-for="act in activityPage">
                    <div style="margin: 5px;">
                        <masker style="border-radius: 2px;" :opacity="0.8">
                            <div class="m-img"
                                 style="background-image:url(https://cdn.xiaotaojiang.com/uploads/56/4b3601364b86fdfd234ef11d8712ad/_.jpg)"></div>
                            <div slot="content" class="m-title" @click="activityDetail(act.id, act.sponsorId)">
                                <span v-if="false">{{ act.id}}</span>
                                {{ act.name }}
                                <br/>
                                <span class="m-time">{{act.introduction}}</span>
                                <br/>
                                <span class="m-time">{{act.startdate}}</span>
                            </div>
                        </masker>
                    </div>
                </div>
            </div>
            <mugen-scroll
                    :handler="getData"
                    :should-handle="!loading"
                    scroll-container="scrollContainer">
                <divider>{{ msg }} </divider>
                <span class="loading dots"></span>
            </mugen-scroll>
        </div>
    </div>
</template>

<script>
    import {FormPreview, XHeader, Masker, Checker, CheckerItem, Divider, Search} from 'vux'
    import MugenScroll from 'vue-mugen-scroll'
    import request from 'superagent'

    export default {
        name: 'app',
        data() {
            return {
                msg: "加载中...",
                demo1: '',
                users: [],
                count: 0,
                loading: false,
                currentPage: 1,
                hobbyNum: '',
                activityPage: [],
                value: '',
                results: [],
                searchCondition: ''
            }
        },
        methods: {
            activityDetail(id, sponsorId) {
                this.$router.push({path: 'activitydetail', query: {actId: id, sponsorId: sponsorId}});
            },
            getData() {
                this.loading = true
                setTimeout(() => {
                    request.get('/wx/activity/seekact')
                        .query({
                            currentPage: this.currentPage,
                            pageSize: 6,
                            hobbyNum: this.hobbyNum,
                            isPass: 0,
                            sort: '1',
                            searchCondition: this.searchCondition
                        }).end((err, res) => {
                        console.log(res);
                        if (!res.ok) {
                            this.show = true;
                        } else {
                            const result = JSON.parse(res.text).data;
                            if (result.length == 0) {
                                this.msg = "暂无更多数据";
                            } else {
                                this.activityPage = [...this.activityPage, ...result];
                                this.currentPage++;
                            }
                            if (result.length < 6) {
                                this.msg = "暂无更多数据";
                            }
                            this.loading = false
                        }
                    });
                }, 1000);
            },
            change (value) {
                console.log(value);
                this.searchCondition = '';
                this.hobbyNum = value;
                this.currentPage = 1;
                this.activityPage = [];
                this.msg = "加载中...";
                this.getData();
            },
            getResult (val) {
                this.searchCondition = val;
                let rs = []
                rs.push({
                    title: `搜索: ${val} `,
                    other: 1
                })
                this.results = val ? rs : []
            },
            onSubmit () {
                console.log(this.searchCondition);
                this.hobbyNum = '';
                this.currentPage = 1;
                this.activityPage = [];
                this.msg = "加载中...";
                this.getData();
            }
        },
        components: {
            MugenScroll,
            XHeader,
            Masker,
            Checker,
            CheckerItem,
            Divider,
            Search
        }
    }
    function getResult(val) {
        let rs = []
        rs.push({
            title: `搜索活动名: ${val} `,
            other: 1
        })
        rs.push({
            title: `搜索发起人: ${val} `,
            other: 2
        })

        return rs
    }
</script>

<style scoped>
    .mugen-scroll {
        padding: 5px;
        font-size: 18px;
    }

    .wrap {
        max-width: 600px;
        height: 480px;
        margin: 0 auto;
        overflow-y: auto;
        text-align: center;
        margin-top: 5px;
    }

    .m-img {
        padding-bottom: 33%;
        display: block;
        position: relative;
        max-width: 100%;
        background-size: cover;
        background-position: center center;
        cursor: pointer;
        border-radius: 2px;
    }

    .m-title {
        color: #fff;
        text-align: center;
        text-shadow: 0 0 2px rgba(0, 0, 0, .5);
        font-weight: 500;
        font-size: 16px;
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        text-align: center;
        top: 50%;
        transform: translateY(-50%);
    }

    .m-time {
        font-size: 12px;
        padding-top: 4px;
        border-top: 1px solid #f0f0f0;
        display: inline-block;
        margin-top: 5px;
    }

    .box {
        padding: 0 20px;
        margin-left: 15px;
    }

    .checker-popup {
        background: rgba(255, 255, 255, 0.5);
    }

    .demo1-item {
        border: 1px solid #ececec;
        padding: 5px 15px;
        margin-top: 6px;
    }

    .demo1-item-selected {
        border: 1px solid green;
    }

    .demo4-item {
        background-color: #ddd;
        color: #222;
        font-size: 14px;
        padding: 5px 15px;
        margin-left: 10px;
        line-height: 18px;
        border-radius: 15px;
        margin-top: 5px;
    }

    .demo4-item-selected {
        background-color: #FF3B3B;
        color: #fff;
    }

    .demo4-item-disabled {
        color: #999;
    }
</style>